<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding:0;
				margin:0;
			}
			#wrap{
				width:500px;
				height:400px;
				border:1px solid black;
				margin:50px auto;
				/*设置盒子为弹性容器*/
				display: flex;

				
			}
			
			#wrap div{
				width:100px;
				/*height:100px;*/
				height:100px;
				/*background: red;*/
				border:1px solid blue;
				

			}
			/*容器500 子元素实际是6*100＝600 超出部分为100*/
			#wrap div:nth-of-type(1){
				/*1.flex-shrink默认值是1*/
				/*2.flex-shrink为0,则不压缩当前项目*/
				flex-shrink: 2;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>1</div>
			<div>2</div>
			<div>3</div>
			
		</div>
	</body>
</html>
